<template>
  <div class="silde_box">
    <slide-verify
      class="silde_box"
      ref="block"
      w="400"
      h="250"
      :slider-text="text"
      :accuracy="accuracy"
      :imgs="imgsCXK"
      @again="onAgain"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
    ></slide-verify>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";
const imgsCXK = [
  "https://www.evogodz.cn/assets/myIndex/img/counters-bg.jpg",
  "http://n.sinaimg.cn/sinacn20118/486/w677h609/20190615/8968-hymscpq6138606.jpg",
  "https://www.evogodz.cn/assets/myIndex3/img/ustc.jpg",
];
//调用父组件定义
const emit = defineEmits([ "LoginSuccess" ]);

const block = ref<SlideVerifyInstance>();

const text = ref("向右滑动");
const accuracy = ref(1);

const onAgain = () => {
  // 刷新
  block.value?.refresh();
};

const onSuccess = () => {
  emit('LoginSuccess');//调用父组件
};

const onFail = () => {
  console.log("验证失败")
};

const onRefresh = () => {
  console.log("刷新成功")
};

</script>

<style lang="less" scoped>
.silde_box {
  margin: 0 auto;
  margin-bottom: 1%;
}
:deep(.slide-verify-refresh-icon .iconfont){
  text-shadow:0 0 5px black;
}
:deep(.slide-verify-slider-text){
  text-shadow: 0 0 3px black;
}
:deep(.slide-verify-slider-mask){
  background-color:rgba(aqua,0.5);
  border: none;
}
:deep(.slide-verify-slider){
  background-color: rgba(#e4e7eb, 0.35);
  border: none;
}
:deep(.slide-verify-slider-mask-item){
  &:hover{
    background-color: rgba(aqua,0.5);
  }
}
</style>
